<template>
  <svg>
  <text
    v-for="(item, i) in texts"
    :key="i"
    :x="item.x"
    :y="item.y"
    :style="item.style"
    :fill="item.fillColor"
  >
    <template v-if="item.isVertical">
      <tspan v-for="(itemStr, strIndex) in getVertervalTexts(item.text)"
          :key="strIndex"
          :x="item.x"
          :dy="`${item.cy * item.scale}${item.unit}`"
          :style="item.style"
          :fill="item.fillColor"
      >{{itemStr}}</tspan>
    </template>
    <tspan
        v-else
        :x="item.x"
        :style="item.style"
        :fill="item.fillColor"
    >{{ item.text }}</tspan>
  </text>
</svg>
</template>

<script setup lang="ts">
defineProps<{
  texts: Array<{
    x: number;
    y: number;
    style: Record<string, string | number>;
    fillColor: string;
    text: string;
  }>;
}>();


const getVertervalTexts = (values)=>{
    console.log('values',values,values.split(''));
    return values.split('');
} 

</script>
